<template>
  <div>
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" ref="tableRef">
      <template #toolbar>
        <Popconfirm
          title="是否导出所筛选统计?"
          ok-text="确认"
          cancel-text="取消"
          @confirm="confirm"
          @cancel="cancel"
        >
          <a-button
            type="primary"
            color="warning"
            v-if="hasPermission(['system:month-statistics:export'])"
          >
            导出
          </a-button>
        </Popconfirm>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              icon: 'clarity:note-edit-line',
              onClick: handleInfo.bind(null, record),
              ifShow: hasPermission(['system:month-statistics:query']),
            },
          ]"
        />
      </template>
    </BasicTable>
    <Drawer @register="registerDrawer" @success="handleSuccess" :type="type" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, unref, ref } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import { BasicTable, useTable, TableAction, TableActionType } from '/@/components/Table';
import { attendanceStatisticList, exportExcel } from '/@/api/backs/attendance/attendanceManagement';
import { useDrawer } from '/@/components/Drawer';
import Drawer from './components/Drawer.vue';

import { columns, searchFormSchema } from './components/tableData';
import { message, Modal,Popconfirm } from 'ant-design-vue';
import { useGo } from '/@/hooks/web/usePage';

export default defineComponent({
  name: 'MenuManagement',
  components: { BasicTable, Drawer, TableAction,Popconfirm },
  props: {},
  setup() {
    const { hasPermission } = usePermission();
    const tableRef = ref<Nullable<TableActionType>>(null);
    const getTableAction = () => {
      const tableAction = unref(tableRef);
      if (!tableAction) {
        throw new Error('tableAction is null');
      }
      return tableAction;
    };
    const go = useGo();
    const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
    const [registerTable, { reload, setSelectedRowKeys, getForm }] = useTable({
      title: '统计列表',
      api: attendanceStatisticList,
      columns,
      formConfig: {
        labelWidth: 100,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      showTableSetting: true,
      showIndexColumn: false,
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
    });
    const getSelectRowList = () => {
      return getTableAction().getSelectRows();
    };
    const setSelectedRowKeyList = (arr) => {
      setSelectedRowKeys(arr);
    };
    const data: any = reactive({
      type: 'add',
    });
    //详情
    const handleInfo = (record) => {
      go('/attendance/clockList/' + record.userId);
    };
    async function confirm() {
      await exportExcel(getForm().getFieldsValue());
    }
    function cancel(){

    }
    function handleSuccess() {}

    function onFetchSuccess() {}

    return {
      ...toRefs(data),
      tableRef,
      registerTable,
      registerDrawer,
      handleSuccess,
      onFetchSuccess,
      getSelectRowList,
      setSelectedRowKeyList,
      handleInfo,
      hasPermission,
      confirm,
      cancel
    };
  },
});
</script>
